<%--
  在制品历史查询(时)
  User: Ivan
  Date: 2019-09-26 16:48
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${SYS_QUERY_PATH}" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>日期<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="11" id="start-date-input" readonly value="${startTime}"/>&nbsp;
            %{--<label>结束日期<strong><span class="text-danger">*</span></strong>：</label>--}%
            %{--<input type="text" name="endTime" class="form-control" data-rule="required"--}%
                   %{--data-toggle="datepicker" data-pattern="yyyy-MM-dd"--}%
                   %{--size="11" id="end-date-input" readonly value="${endTime}"/>&nbsp;--}%
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/WipHisQueryHour/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${reportList.size() > 0}">
        <div>
            <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr>
                    <th width="50" rowspan="2">NO.</th>
                    <th width="100" rowspan="2">工段</th>
                    <g:each in="${dateList}" status="i" var="headInstance">
                        <th width="${headInstance.WIDTHS}" colspan="${headInstance.SPEC_CNT}">${headInstance.TRANS_TIME}</th>
                    </g:each>
                </tr>
                <tr>
                    <g:each in="${timeList}" status="i" var="headInstance">
                        <th width="80">${headInstance.TRANS_TIME}</th>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <g:each in="${reportList}" status="i" var="dataInstance">
                    <tr>
                        <td>${i + 1}</td>
                        <td>${dataInstance.STAGE_DESC}</td>
                        <g:each in="${timeList}" status="j" var="headInstance">
                            <td>
                                <a href="${request.getContextPath()}/WipHisQueryHour/wipHisQueryHourDetail?startTime=<%=params.startTime %>&transTime=<%=headInstance.TRANS_TIME%>&stageDesc=<%=dataInstance.STAGE_DESC%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'wipHisQueryHourDetail', title:'<%=params.startTime %> <%=headInstance.TRANS_TIME%> <%=dataInstance.STAGE_DESC%>明细'}">
                                    ${dataInstance[headInstance.TRANS_TIME]}
                                </a>
                            </td>
                        </g:each>
                    </tr>
                </g:each>
                </tbody>
            </table>
        </div>

        <div style="width:96%;height:450px;margin:20px auto" id="wipHisQueryHourChart"></div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>
<script type="text/javascript" src="${request.getContextPath()}/js/echarts/v4/echarts.min.js"></script>
<script type="text/javascript">
    var wipHisQueryHourChart = function () {
        var stageDescList = []
        var dateList = []
        <g:each in="${stageDescList}" var="headInstance">
        stageDescList.push("${headInstance}");
        </g:each>
        <g:each in="${timeList}" var="headInstance">
        dateList.push("${headInstance.TRANS_TIME}");
        </g:each>
        var myChart = echarts.init(document.getElementById("wipHisQueryHourChart"));
        //        出荷   净空房1000级  净空房100级  喷砂     品检      溶射      受入      液洗       中间     液洗超音波  终检     分析室
        colors = ['#2EC7C9','#B6A2DE','#5AB1EF','#CCFF99','#FF4DFF','#FF8080','#0066CC','#99ff99','#000080','#ace600','#FFFF66','#00FFFF']
        option = {
            color: colors,
            title: {
                show: true,
                text: '${startTime}每小时在制品走势图',
                x: 'center',
                textStyle: {
                    fontSize: 25,
                    fontStyle: 'normal',
                    fontWeight: 'bolder',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: stageDescList,
                x: 'center',
                y: 'bottom',
                padding: 0,
                textStyle: {
                    fontSize: 14
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    name: '时间',
                    show: true,
                    type: 'category',
                    boundaryGap: false,
                    data: dateList,
                    axisLabel: {
                        show: true,
                        rotate: 25,
                        fontSize: 14
                    }
                }
            ],
            yAxis: [
                {
                    name: '数量',
                    type: 'value',
                    axisLabel: {
                        show: true,
                        fontSize: 14
                    }
                }
            ],
            series: [
                <g:each in="${reportList}" var="dataInstance">
                <g:if test="${dataInstance.STAGE_DESC != 'Total'}">
                {
                    name: '${dataInstance.STAGE_DESC}',
                    type: 'line',
                    stack: '总量',
                    showSymbol: true,
                    symbol: 'circle',	// 设定为实心点
                    symbolSize: 8,	// 设定实心点的大小
                    areaStyle: {},
                    data: [
                        <g:each in="${timeList}" status="j" var="headInstance">
                        <g:if test="${dataInstance[headInstance.TRANS_TIME] == null}">0, </g:if>
                        <g:else>${dataInstance[headInstance.TRANS_TIME]}, </g:else>
                        </g:each>
                    ]
                },
                </g:if>
                </g:each>
            ]
        };
        myChart.setOption(option, true);
    }

    $(function () {
        <g:if test="${reportList.size() > 0}">
        wipHisQueryHourChart();
        </g:if>
    });
</script>